import {numberHandle, safeMultiple} from '~/utils/number';
import {strInsert} from '../../utils/convert';
import {ECHART_COLOR} from '../../utils/color';

export const echartsOption = (chart, tooltip, grid, yAxisIndex,
    unitPercentIndex = -1, dataZoomEnd, label, stack, smooth, xNameLength, color = ECHART_COLOR, rotate) => {
    const {legend = {}, xAxis = [], yAxis = [], series = []} = chart;
    let seriesData = series;
    let xAxisData = xAxis;
    let yAxisData = yAxis;
    yAxisData = yAxis?.map((item, index) => ({
        ...item,
        name: '',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            },
            show: false
        },
        axisLabel: {
            // formatter: index === 0 ? '{value}' : '{value}%'
            formatter(value) {
                const texts = [];
                if (index === unitPercentIndex) {
                    texts.push(`${safeMultiple(value, 100)}%`);
                }
                else {
                    texts.push(Number(value) > 10000 ? numberHandle(value, 0) : numberHandle(value, 1));
                }
                return texts;
            }
        },
    }));
    seriesData = seriesData.map(ele => {
        if (ele.type === 'line') {
            if (yAxisIndex) {
                ele.yAxisIndex = 1;
            }
            if (stack) {
                ele.stack = stack;
                ele.areaStyle = {};
            }
            ele.label = {
                show: !!label?.line,
                formatter(params) {
                    return label?.line ? label?.line(params) : null;
                }
            };
            ele.smooth = smooth;
        }
        if (ele.type === 'bar') {
            ele.barMaxWidth = 30;
            ele.label = {
                ...ele.label,
                show: !!label?.bar,
                position: label?.bar ? 'top' : 'inside',
                formatter(params) {
                    return label?.bar ? label?.bar(params) : null;
                }
            };
        }
        return ele;
    });
    xAxisData = xAxis.map(ele => {
        if (rotate) {
            ele.axisLabel = {
                interval: 0,
                rotate,
                showMinLabel: false,
                showMaxLabel: false
            };
        }
        ele.data = ele.data.map(xAxisName => {
            if (xNameLength && xAxisName && xAxisName.length > xNameLength) {
                xAxisName = strInsert(xAxisName, xNameLength, '#').replace(/#/g, '\n');
            }
            return xAxisName;
        });
        return ele;
    });
    const option = {
        color,
        tooltip: {
            show: true,
            trigger: 'axis',
            formatter(params) {
                return tooltip ? tooltip(params) : null;
            }
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: dataZoomEnd
            },
            {
                type: 'slider',
                start: 0,
                end: dataZoomEnd
            }
        ],
        grid,
        legend: {
            ...legend,
            left: 'left',
            type: 'scroll'
        },
        xAxis: xAxisData,
        yAxis: yAxisData,
        series: seriesData
    };
    return option;
};
